import QueryFilter from '@/components/QueryFilter';
import Toolbar from '@/components/Toolbar';
import useAntdList from '@/hooks/useAntdList';
import { queryAccount } from '@/service/globalSetting';
import { Button, Image,Form, Space, Table } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import React from 'react';
import UploadImage from './UploadImage';
import useAntdModal from '@/hooks/useAntdModal';
import { queryImage } from '@/service/internal';
const ImageList = () => {
  let [form] = Form.useForm()
  const {tableProps,search,refresh} = useAntdList(queryImage,{form})
  const uploadImage = useAntdModal({refresh});
  const columns: ColumnsType<any> = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '分类',
      dataIndex: 'category',
    },
    {
    title: '图片',
    render(v){
      return <Image src={v.url} width={80} height={80}/>
    }
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
  },
  {
    title: '操作',
    render(v) {
      return <Space>
        <Button onClick={()=>uploadImage.openModal(v)} type="link">编辑</Button>
      </Space>
    }
  }
  ]
  return (<div>
    <UploadImage {...uploadImage}/>
    <QueryFilter
    items={[{
      label:'图片名称'
    }]}
    form={form} reset={search.reset} submit={search.submit}/>
    <Toolbar rightRender={
      <Space>
        <Button onClick={()=>uploadImage.openModal({})}>上传图片</Button>
      </Space>
    }/>
    <Table columns={columns} {...tableProps}/>
  </div>)
}
export default ImageList